<template>
    <div class="menuDrawer-wrap el-card__body">
        <div>
            <form class="el-form">
                <div class="el-row" span="24">
                    <div class="avue-group avue-group--header" index="0" active="1">
                        <div role="tablist" aria-multiselectable="true" class="el-collapse">
                            <div class="el-collapse-item is-active">
                                <div
                                        role="tab"
                                        aria-expanded="true"
                                        aria-controls="el-collapse-content-3774"
                                        aria-describedby="el-collapse-content-3774"
                                >
                                    <div
                                            role="button"
                                            id="el-collapse-head-3774"
                                            tabindex="0"
                                            class="el-collapse-item__header is-active"
                                    >
                                        <i
                                                class="
                        el-collapse-item__arrow
                        el-icon-arrow-right
                        is-active
                      "
                                        ></i>
                                    </div>
                                </div>
                                <div
                                        role="tabpanel"
                                        aria-labelledby="el-collapse-head-3774"
                                        id="el-collapse-content-3774"
                                        class="el-collapse-item__wrap"
                                >
                                    <div class="el-collapse-item__content">
                                        <div class="avue-form__group avue-form__group--flex">
                                            <div
                                                    v-for="i in detailOptions.options.column"
                                                    :key="i"
                                                    v-model="form"
                                                    class="
                          el-col
                          el-col-12
                          el-col-offset-0
                          el-col-xs-24
                          el-col-sm-12
                          el-col-md-12
                          avue-form__row
                          avue--detail
                        "
                                                    style="padding-left: 10px; padding-right: 10px"
                                            >
                                                <div
                                                        class="
                            el-form-item el-form-item--small
                            avue-form__item--
                          "
                                                >
                                                    <label
                                                            for="batchName"
                                                            class="el-form-item__label"
                                                            style="width: 90px"
                                                    >
                                                        {{ i.label }}:</label
                                                    >
                                                    <div
                                                            class="el-form-item__content"
                                                            style="margin-left: 90px"
                                                    >
                                                        <!---->
                                                        <div disabled="disabled" content="请输入 流程编号">
                                                            <div
                                                                    class="
                                  el-input el-input--small
                                  is-disabled
                                  avue-input
                                "
                                                                    column-slot="menuForm"
                                                                    search="true"
                                                                    index=""
                                                                    boxtype="view"
                                                            >
                                                                {{ form[i.prop] }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--操作按钮-->
            <div class="closeBtn" v-show="flowStatus" >
                <el-button
                        icon="el-icon-check"
                        size="small"
                        plain
                        type="success"
                        @click="agree(row)"
                >同意</el-button
                >
                <el-button
                        @click="process"
                        type="danger"
                        icon="el-icon-close"
                        :size="'small'"
                        plain
                >驳回</el-button
                >
            </div>
        </div>
        <avue-crud
                :option="codeDetailOptions.options"
                :data="data"
                :page.sync="menuPage"
                @selection-change="selMenuChange"
                @on-load="onLoad"
        >
        </avue-crud>
        <my-drawer
                class="avue-dialog bidBusinessDrawer"
                :title="'查看'"
                :showDraw="successShow"
                @close="successShow = false"
        >
        </my-drawer>
        <el-dialog
                title="选择经办人员"
                :visible.sync="dialogVisible"
                width="31%"
                :before-close="handleClose"
                :modal-append-to-body="false"
        >
            <div>
                <el-radio
                        v-model="radioTreaty"
                        :label="index"
                        border
                        @change="agreeChange"
                        text-color="#409eff"
                        v-for="(item, index) in dataSlect"
                        :key="index"
                >
                    <div class="avue-card__item">
                        <div class="avue-card__body">
                            <div class="avue-card__avatar">
                                <img :src="item.img === '' ? UserImage : item.img" alt="" />
                            </div>
                            <div class="avue-card__detail">
                                <div class="avue-card__title">{{ item.title }}</div>
                                <div class="avue-card__info">{{ item.text }}</div>
                            </div>
                        </div>
                    </div>
                </el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSuccess">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import { getWorkList,getNextNodePerson } from '@/api/approve/approve'

    export default {

        props: {
            // 表单列表
            formsList: {
                type: Object,
                required: true
            },
            // 详情列表
            detaiList: {
                type: Object,
                required: true
            },
            // 操作权限
            flowStatus:{
                type:Boolean,
                default:true
            }
        },

        data () {
            return {
                UserImage: require('@/assets/images/icon_people.png'),
                radioTreaty: 0,
                optionSlect: {
                    props: {
                        img: 'img',
                        title: 'title',
                        info: 'text'
                    }
                },
                dataSlect: [],
                data: [],
                successShow: false,
                dialogVisible: false,
                form: this.formsList,
                detailOptions: this.detaiList,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                bussinessId: this.formsList.id,
                codeDetailOptions: {
                    options: {
                        columnBtn: false,
                        refreshBtn: false,
                        menu: false,
                        dialogDirection: 'ltr',
                        menuForm: false,
                        dialogType: 'drawer',
                        height: 'auto',
                        calcHeight: 30,
                        tip: false,
                        searchShow: true,
                        searchMenuSpan: 6,
                        border: true,
                        selection: true,
                        editBtn: true,
                        addBtn: false,
                        viewBtn: true,
                        dialogWidth: 900,
                        menuWidth: 100,
                        dialogClickModal: false,
                        column: [
                            {
                                label: '节点',
                                prop: 'node'
                            },
                            {
                                label: '动作',
                                prop: 'opera'
                            },

                            {
                                label: '经办人员',
                                prop: 'submitUser'
                            },
                            {
                                label: '审批时间',
                                prop: 'submitTime'
                            }
                        ]
                    }
                }
            }
        },
        mounted () {
            console.log('this.detailOptions', this.detailOptions.options.column)
            let column = this.detailOptions.options.column
            for (let i = 0; i < column.length; i++) {
                if (column[i].type == ' select') {
                    console.log('i.props', this.form[i.prop])
                }
            }
        },
        methods: {
            onLoad (page, params = {}) {
                this.loading = true
                getWorkList(
                    page.currentPage,
                    page.pageSize,
                    this.formsList.id,
                    Object.assign(params, this.query)
                ).then(res => {
                    const data = res.data.data
                    this.page.total = data.total
                    this.data = data.records
                    this.loading = false
                })
            },
            //待办流程
            process () {
                const h = this.$createElement
                this.$prompt(h('div', null, [h('p', null, '驳回原由：')]), '驳回原由：', {
                    // inputPattern:  /\s+/g,
                    inputValidator (value) {
                        if (value == undefined || value.length == 0 || value.trim() == '') {
                            return '驳回原由不能为空'
                        }
                    },
                    inputErrorMessage: '驳回原由不能为空！',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(({ value }) => {
                        //调接口-----传参数
                        let data = {
                            ids: this.ids,
                            noticeReason: value
                        }
                        // noticeBatch(data).then(res => {
                        this.noticeBatch(data).then(res => {
                            if (res.data.success) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.data
                                })
                                this.onLoad(this.page, this.query)
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: res.data.msg
                                })
                            }
                        })
                    })
                    .catch(() => {})
            },

            dialogSuccess () {
                this.dataSlect[this.radioTreaty];
                this.dialogVisible = false;
            },

            // 同意,选择下一节点审批人
            agree() {
                debugger;
                let that = this;
                let params = {
                    // 流程ID
                    flowModelId: "1509140678678200001",
                    index: "1"
                };
                getNextNodePerson(params).then(res => {
                    if (res.data.success) {
                        this.dialogVisible = true;
                        // 下一节点审批人列表赋值
                        that.dataSlect = res.data.data;
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.data.msg
                        })
                    }
                })
            },

            // 加载数据
            agreeChange: function (val) {
                this.radioTreaty = val;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-form {
        padding-top: 20px;
    }
    .closeBtn {
        display: flex;
        justify-content: center;
        padding-right: 20px;
        .el-button--success.is-plain {
            margin-right: 20px;
        }
    }
    .el-radio.is-bordered {
        height: auto;
        margin-left: 0px;
    }
    .avue-card__item {
        width: 200px;
        border: none;
        margin-top: 10px;
        height: auto;
    }
    .avue-card__info {
        height: auto;
    }
    .avue-card__avatar {
        margin-left: 12px;
    }
    /deep/.theme-hey .el-radio__input.is-checked .el-radio__inner {
        border-color: #409eff !important;
        background: #409eff !important;
    }
    .el-radio.is-bordered + .el-radio.is-bordered {
        margin-left: 0px;
        margin-top: 10px;
    }
    .card__info {
        width: 50px;
    }
    .el-radio {
        white-space: normal;
    }
    .avue-card__body {
        padding: 20px 20px 30px 0px;
    }
</style>

